<template>
	<view class="container">
		<picker @change="payTypeChange" :value="payType.index" :range="payType.picker">
			<tui-list-cell :arrow="true" last="true" class="tui-list">
				<image src="../../static/img/my/type.png" class="logo" mode="widthFix"></image>
				<text class="tui-list-cell-name">支出类型</text>
				<view class="tui-right">
					{{payType.index>-1?payType.picker[payType.index]:'请选择支付方式'}}
				</view>
			</tui-list-cell>
		</picker>
		<picker @change="payModeChange" :value="payMode.index" :range="payMode.picker">
			<tui-list-cell :arrow="true" last="true" class="tui-list">
				<image src="../../static/img/my/mode.png" class="logo" mode="widthFix"></image>
				<text class="tui-list-cell-name">支出方式</text>
				<view class="tui-right">
					{{payMode.index>-1?payMode.picker[payMode.index]:'请选择支付方式'}}
				</view>
			</tui-list-cell>
		</picker>
		<picker mode="date" :value="date.value" :start="date.start" :end="date.end" @change="dateChange">
			<tui-list-cell :arrow="true" last="true" class="tui-list">
				<image src="../../static/date.png" class="logo" mode="widthFix"></image>
				<text class="tui-list-cell-name">支出日期</text>
				<view class="tui-right">
					{{date.value}}
				</view>
			</tui-list-cell>
		</picker>
		<tui-list-cell :arrow="false" last="false" class="tui-list">
			<image src="../../static/img/my/money.png" class="logo" mode="widthFix"></image>
			<text class="tui-list-cell-name">金额</text>
			<view class="tui-right">{{code}}</view>
		</tui-list-cell>
		
		<tui-button @click="submit" style="padding-top: 42upx;" type="blue" :shadow="true" shape="circle"  width="500rpx">保存</tui-button>
		<DigitalKeyboard @change="contToggle" :keyBoardSwitch="keyBoardSwitch" :decimalPoint="true"></DigitalKeyboard>
	</view>
</template>

<script>
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiIcon from "@/components/icon/icon"
	import tuiButton from "@/components/extend/button/button"
	import DigitalKeyboard from '../../js_sdk/digital-keyboard/components/digital-keyboard/digital-keyboard.vue'
	import common from "../../common/common.js"
	import url from "../../common/url.js"
	
	let self=null;
	export default {
		components:{
			tuiListCell,
			tuiIcon,
			tuiButton,
			DigitalKeyboard
		},
		data() {
			return {
				code:'',
				pointNumber:0,//code小数点后面的数
				length:99999,
				keyBoardSwitch:true,
				type:'',
				billId:0,
				payType:{
					index:0,
					picker:['请求中']
				},
				payMode:{
					index:0,
					picker:['花呗','招商信用卡','余额宝']
				},
				date:{
					value:'2019-10-15',
					start:'2000-09-01',
					end:'2999-01-01'
				},
			}
		},
		onLoad(param){
			self=this;
			
			//判断是更新还是添加
			if('bill_id' in param){
				this.type='update';
				this.billId=param.bill_id;
				this.code=(param.money/100).toString();
			}else{
				this.type='add';
			}
			
			//获取支出类型
			common.http({
				url:url.userGetPayTypeAndPayMode,
				data:{key:common.userInfo.key},
				ok(data){
					console.log(data)
					//如果没有支出方式或者支出类型直接返回
					if(data.payMode.length<=0){
						uni.hideLoading();
						uni.showToast({
						    title: '您没有设置支出方式！',
						    duration: 1000,
							icon:'none'
						});
						setTimeout(()=>{
							uni.navigateBack()
						}, 1000);
						return 
					}else if(data.payType.length<=0){
						uni.hideLoading();
						uni.showToast({
						    title: '您没有设置支出类型！',
						    duration: 1000,
							icon:'none'
						});
						setTimeout(()=>{
							uni.navigateBack()
						}, 1000);
						return 
					}
					
					//支出方式初始化
					let picker=[];
					for(let k in data.payMode){
						picker.push(data.payMode[k].modeName);
						if(self.type==='update'&&data.payMode[k].modeName==param.payMode){
							self.payMode.index=k;
						}
					}
					self.payMode.picker=picker;
					
					//支出类型初始化
					picker=[];
					for(let k in data.payType){
						picker.push(data.payType[k].typeName);
						if(self.type==='update'&&data.payType[k].typeName==param.payType){
							self.payType.index=k;
						}
					}
					self.payType.picker=picker;
					if(self.type=='add'){
						self.payType.index=param.pay_type_index;
					}
					
					//日期
					if(self.type==='add'){
						self.date.value=common.time_format('Y-m-d',Math.round(new Date()));
					}else{
						self.date.value=common.time_format('Y-m-d',param.date*1000);
					}
					
					
					uni.hideLoading();
				}
			});
		},
		methods: {
			//提交
			submit(){
				if(this.code==''){
					uni.showToast({
					    title: '请输入记账金额！',
					    duration: 2000,
						icon:'none'
					});
					return
				}
				
				let param={
					money:parseFloat(this.code)*100,
					date:(new Date(this.date.value))/1000,
					payMode:this.payMode.picker[this.payMode.index],
					payType:this.payType.picker[this.payType.index],
					payTypeId:this.payType.index,
					key:common.userInfo.key
				}
				
				if(this.type=='add'){
					common.http({
						url:url.recordSet,
						data:param,
						ok(data){
							uni.showToast({
							    title: '记录成功！',
							    duration: 1000,
							});
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
						}
					})
				}else{
					param.billId=this.billId;
					common.http({
						url:url.recordUpdate,
						data:param,
						ok(data){
							uni.showToast({
							    title: '修改成功！',
							    duration: 1000,
							});
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
						}
					})
				}
			
				
			},
			contToggle(k){
				k=k.toString()
			    if(k==''){
					if(this.code=='')return
					
					if(this.pointNumber!=0)
						this.pointNumber--
					else if('.'===this.code.slice(this.code.length-2,this.code.length-1))	
						this.pointNumber=1
						
					this.code=this.code.slice(0,this.code.length-1)
				}else if(this.pointNumber>=3){
					return
				}else if(k==='.'&&this.code==''){
					return
				}else{
					this.code+=k
					if(k==='.')
						this.pointNumber++
					else if(this.pointNumber!==0)
						this.pointNumber++
				}
				
			},
			payTypeChange(e){
				this.payType.index=e.detail.value
			},
			payModeChange(e) {
				this.payMode.index = e.detail.value
			},
			dateChange(e) {
				this.date.value = e.detail.value
			},
		}
	}
</script>

<style>
.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-list-view {
		padding-top: 40upx !important
	}

	.tui-list-cell-name {
		padding-left: 20upx;
		vertical-align: middle;
		line-height: 30upx;
	}

	.tui-list::after {
		left: 94upx !important
	}

	.tui-right {
		margin-left: auto;
		margin-right: 34upx;
		font-size: 26upx;
		line-height: 1;
		color: #999;
	}

	.logo {
		height: 40upx;
		width: 40upx;
	}

	.tui-flex {
		display: flex;
		align-items: center;
	}

	.tui-msg-box {
		display: flex;
		align-items: center;
	}

	.tui-msg-pic {
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		display: block;
		margin-right: 24upx;
	}

	.tui-msg-item {
		max-width: 500upx;
		min-height: 80upx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 34upx;
		line-height: 1;
		color: #262b3a;
	}

	.tui-msg-content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 26upx;
		line-height: 1;
		color: #9397a4;
	}

	.tui-msg-right {
		max-width: 120upx;
		height: 88upx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.tui-msg-right.tui-right-dot {
		height: 76upx;
		padding-bottom: 10upx;

	}

	.tui-msg-time {
		width: 100%;
		font-size: 24upx;
		line-height: 24upx;
		color: #9397a4;
	}

	.tui-badge {
		width: auto
	}

	.tui-msg::after {
		left: 154upx !important
	}
</style>
